<!DOCTYPE html>
<html>
<head>
    {{>header}}
    <title>Coffee store</title>
</head>
<body>
<div class="container">
    <div id="buySuccess" class="row justify-content-center py-2" style="display:none;">
        <div class="alert alert-success" role="alert">
            Buy products success
        </div>
    </div>

    <div id="buyFailure" class="row justify-content-center py-2" style="display:none;">
        <div id="buyFailureContent" class="alert alert-danger" role="alert">
        </div>
    </div>

    <div class="row py-2">
        <div class="col">
            {{#userInfo}}Hi {{name}}. {{/userInfo}}
            Welcome to coffee store.
            {{#userInfo}}<a href="/logout">Sign out</a>{{/userInfo}}
            {{^userInfo}}<a href="/login">Sign in</a>{{/userInfo}}
        </div>
    </div>

    <form action="/" method="get">
        <div class="form-row align-items-center py-2">
            <div class="col-auto">
                <label class="sr-only" for="searchKey">Name</label>
                <input type="text" name="searchKey" value="{{searchKey}}" class="form-control mb-2 mb-sm-0"
                       id="searchKey" placeholder="name">
            </div>
            <div class="col-auto">
                <label for="productType" class="sr-only">State</label>
                <select id="productType" name="type" class="form-control">
                    <option value="0">All</option>
                    <option value="1">Coffee</option>
                    <option value="2">Dessert</option>
                </select>
                <input type="hidden" id="productTypeValue" value="{{type}}">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-outline-secondary">Search</button>
            </div>
            {{#userInfo}}
                <div class="col-auto">
                    <button id="buyProducts" type="button" class="btn btn-primary">Buy</button>
                </div>
            {{/userInfo}}
        </div>
    </form>

    <div class="row">
        <div class="col">
            <table id="productTable" class="table table-hover table-responsive table-bordered">
                <thead>
                <tr class="table-primary">
                    {{#userInfo}}
                        <th>
                            <div><label class="form-check-label"><input class="form-check-input" type="checkbox"
                                                                        id="allProductBox" value="allProductBox"
                                                                        aria-label="..."></label></div>
                        </th>
                        <th>Num</th>
                    {{/userInfo}}
                    <th>#</th>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Description</th>
                </tr>
                </thead>
                <tbody>
                {{#userInfo}}
                    {{#products}}
                        {{#record}}
                            <tr>
                                <td>
                                    <div><label class="form-check-label"><input class="form-check-input"
                                                                                name="productSubBox" type="checkbox"
                                                                                value="{{id}}" aria-label="..."></label>
                                    </div>
                                </td>
                                <td><input title="Buy number" id="buyAmount_{{id}}" name="buyNumber" type="number"
                                           min="1" max="100" maxlength="3" value="1"></td>
                                <td>{{id}}</td>
                                <td>{{name}}</td>
                                <td>{{price}}</td>
                                <td>{{typeDesc}}</td>
                                <td>{{amount}}</td>
                                <td>{{description}}</td>
                            </tr>
                        {{/record}}
                        {{^record}}
                            <tr>
                                <td colspan="6">No data</td>
                            </tr>
                        {{/record}}
                    {{/products}}
                {{/userInfo}}
                {{^userInfo}}
                    {{#products}}
                        {{#record}}
                            <tr>
                                <td>{{id}}</td>
                                <td>{{name}}</td>
                                <td>{{price}}</td>
                                <td>{{typeDesc}}</td>
                                <td>{{amount}}</td>
                                <td>{{description}}</td>
                            </tr>
                        {{/record}}
                        {{^record}}
                            <tr>
                                <td colspan="6">No data</td>
                            </tr>
                        {{/record}}
                    {{/products}}
                {{/userInfo}}
                </tbody>
            </table>

            {{#products}}
                <div class="d-flex justify-content-end">
                    <div class="p-1">
                        <a href="/?pageNumber={{lastNumber}}&type={{type}}&searchKey={{searchKey}}"
                        {{^last}}aria-disabled="true"{{/last}} role="button"
                        class="btn btn-outline-primary btn-sm {{^last}}disabled{{/last}}">Previous</a>
                    </div>
                    <div class="py-1">
                        <a href="/?pageNumber={{nextNumber}}&type={{type}}&searchKey={{searchKey}}"
                        {{^next}}aria-disabled="true"{{/next}} role="button"
                        class="btn btn-outline-primary btn-sm {{^next}}disabled{{/next}}">Next</a>
                    </div>
                </div>
            {{/products}}
        </div>
    </div>

</div>

{{>scripts}}
<script src="/static/js/mainPage.js"></script>
</body>
</html>